<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      justify-content: center;
      background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
      background-size: 100% 100%;
      font-family: "Kanit", Verdana, Arial, sans-serif;
    }

    #container {
      width: 430px;
      padding: 40px 20px;
      background: white;
    }

    h1 {
      color: #0773d7;
      font-size: 30px;
      width: 100%;
      margin-top: -15px;
      margin-bottom: 30px;
      text-align: center;
      /* 用于控制文本的大小写转换  将文本中的所有字母转换为大写字母 */
      text-transform: uppercase;
    }

    #text {
      display: block;
      width: 100%;
      background-color: transparent;
      color: #021652;
      border-radius: 2px;
      /* 禁止元素的大小调整，元素将不可被用户拖动以调整大小 */
      /* 即文本框不可以被拖动大小 */
      resize: none;
      margin-bottom: 35px;
      height: 200px;
      padding: 10px;
      font-size: 20px;
    }

    #filename {
      /* 计算属性：注意+-前后要用空格隔开 */
      width: calc(100% - 200px);
      border: 2px solid #3ba9f4;
      border-radius: 2px;
      background-color: transparent;
      color: #052a53;
      padding: 0 10px;
      height: 50px;
      line-height: 20px;
      font-size: 20px;
      margin-right: 20px;
    }

    #download {
      background-color: #3ba9f4;
      color: #fff;
      font-size: 20px;
      height: 50px;
      border: none;
      border-radius: 2px;
      width: 174px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="container">
    <h1>将文本保存到文件中</h1>
    <textarea placeholder="在此输入文字..." id="text"></textarea>
    <input id="filename" placeholder="起一个文件名...">
    <button id="download">下载文件</button>
  </div>
</body>
<script type="text/javascript">
  function downloadFile(filename, content) {
    //创建a链接
    const element = document.createElement('a')

    // Blob 是一种可以存储二进制数据的数据类型
    // 根据要保存的文件,它可以有不同的值
    const blob = new Blob([content], { type: "plain/text" });
    // createObjectURL 静态方法创建一个DOMString,其中包含一个URL,该 URL 表示参数中给出的对象.
    const fileUrl = URL.createObjectURL(blob);

    // setAttribute() 设置指定元素的属性值
    element.setAttribute('href', fileUrl); // 文件位置
    //<a>的download属性用于指定下载链接。当用户点击链接时，浏览器会下载文件，而不是打开链接。
    // 可以提供一个文件名（如果不提供，文件名将是 URL 的最后一部分）。
    element.setAttribute('download', filename); // 文件名
    element.style.display = 'none';

    document.body.appendChild(element); // 将 <a> 标签添加到文档中。

    // 当 element.click() 被调用时，浏览器会根据 <a> 标签的 href 和 download 属性执行下载操作。
    // 这会触发浏览器的下载机制，打开下载提示窗口或直接下载文件，具体行为取决于用户的浏览器设置。
    element.click(); // 模拟点击该链接，浏览器会开始下载文件。


    document.body.removeChild(element); // 下载完成后，立即将该元素从文档中移除。
  }

  //点击下载后先触发，判断这两个框中是否都有值
  window.onload = () => {
    document.getElementById('download').addEventListener('click', () => {
      // 文件名输入框的值
      const filename = document.getElementById('filename').value;

      // 文本中输入的值
      const content = document.getElementById('text').value;

      // &&(逻辑与)运算符只是两个操作数是否为真，如果两个操作数都具有非零值，则结果为1，否则结果为0
      if (filename && content) {
        downloadFile(filename, content);
      }
    })
  }
</script>

</html>